<template>
  <div class="crud">
    <el-table
      ref="gridTable"
      v-loading="listLoading"
      :data="showGridData"
      default-expand-all
      :tree-props="treeProps || {}"
      :row-key="rowKey"
      :span-method="mergeRowColumn"
      size="small"
      style="width: 100%"
    >
      <el-table-column
        v-for="(item,index) in gridColumns"
        :key="index"
        :prop="item.prop"
        :class-name="item.className || ''"
        :label="item.label"
        :resizable="!!item.resizable"
        :sortable="item.sortable"
        :align="item.align"
        :show-overflow-tooltip="item.showOverflowTooltip"
        :width="item.width?item.width:''"
      >
        <template slot-scope="scope">
          <cell
            v-if="item.render"
            :row="scope.row"
            :column="item"
            :index="scope.$index"
            :render="item.render"
          />
          <template v-else-if="item.filter">{{ item.filter(scope.row[item.prop]) }}</template>
          <formatter-component
            v-else
            :format="item.format"
            :options="item.options"
            :row="scope.row"
            :column="item.prop"
            :index="scope.$index"
          />
        </template>
      </el-table-column>
      <el-table-column
        v-if="visibleHandle"
        fixed="right"
        label="操作"
        align="right"
        class-name="action-column"
        :width="gridEditWidth?gridEditWidth:''"
      >
        <template slot-scope="scope">
          <el-button
            v-for="(item,index) in validateHandles(scope.row)"
            :key="index"
            size="mini"
            :type="item.type?item.type:'text'"
            @click="handleEmit(item.emitName, scope.row)"
          >{{ item.name }}</el-button>
        </template>
      </el-table-column>
      <div
        slot="append"
        class="crud-footer"
      >
        <slot name="append" />
      </div>
    </el-table>
  </div>
</template>

<script>
import GridProps from '../mixins/gridProps'

export default {
  name: 'GridAdvenceView',
  mixins: [GridProps],
  props: {
    mergeRowColumn: {
      type: Function,
      default: ({ row, column, rowIndex, columnIndex }) => {}
    },
    rowKey: {
      type: [String],
      default: ''
    }
  },
  computed: {},
  methods: {}
}
</script>
